<template>
	<view class="progress" :style="{width:props.percent+'%'}">
		<view class="bar"></view>
		<view class="text">
			{{percent}}%
		</view>
	</view>
</template>

<script lang="ts" setup>
import { watch,ref } from 'vue';
	const props = defineProps<{
		percent: number;
	}>()
		const percentStep = ref(0)
		
		watch(() => props.percent, (val, oldVal) => {
			oldVal = oldVal ?? 0
			const step = (val-oldVal) / 500
			const next = () => {
				if(	percentStep.value >= val){
					percentStep.value = val
					return
				}
				percentStep.value += step
				requestAnimationFrame(next)
			}
			next()
		})
	
</script>

<style scoped lang="scss">
	.progress{
		transition: all 0.5s;
		.bar{
			background-image: linear-gradient(to right, #fff, var(--primary-color));
			height: 8rpx;
			border-radius: 5rpx;
		}
		.text{
			text-align: right;
			color: var(--primary-color);
			font-size:20rpx;
			margin-top: 2px;
		}
		
	}
</style>